ホームページ > 記事 > ウェブフロントエンド > 単純な推測ゲームを作成するための HTML5 Canvas API
単純な推測ゲームを作成するための HTML5 Canvas API
- 不言オリジナル
- 2018-07-03 13:48:382707ブラウズ
この記事では主に、HTML5 Canvas API を使用して簡単な推測ゲームを作成する例を紹介します。ゲーム内の各ゲームは、必要な友達がどの文字を指すかを推測するためにキーボードを押します。それに
早速、レンダリングとソースコードから始めましょう~
HTMLコード
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="chp1_guess_the_letter.js"></script>
<script type="text/javascript" src="modernizr.custom.99886.js"></script>
</head>
<body>
<canvas id="canvas_guess_the_letter" width="500" height="300">
你的浏览器不支持HTML5 Canvas
</canvas>
<form>
<input type="button" id="createImageData" value="Export Canvas Image" />;
</form>
</body>
</html>JSコード
/**
* @author Rafael
*/
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {
};
Debugger.log = function(message) {
try {
console.log(message);
} catch(exception) {
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function canvasApp() {
var guesses = 0;
var message = "Guess The Letter From a(lower) to z(higher)";
var letters = ["a","b","c","d","e","f","g","h","i","j","k","l",
"m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
var today = new Date();
var letterToGuess = "";
var higherOrLower = "";
var letterGuessed = [];
var gameOver = false;
if(!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvas_guess_the_letter");
var context = theCanvas.getContext("2d");
initGame();
function initGame() {
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
guesses = 0;
lettersGuessed = [];
gameOver = false;
window.addEventListener("keyup", eventKeyPressed, true);
var formElement = document.getElementById("createImageData");
formElement.addEventListener('click', createImageDataPressed, false);
drawScreen();
}
function eventKeyPressed(e) {
if(!gameOver) {
var letterPressed = String.fromCharCode(e.keyCode);
letterPressed = letterPressed.toLowerCase();
guesses++;
letterGuessed.push(letterPressed);
if(letterPressed == letterToGuess) {
gameOver = true;
} else {
letterIndex = letters.indexOf(letterToGuess);
guessIndex = letters.indexOf(letterPressed);
if(guessIndex < 0) {
higherOrLower = "请输入正确的字符";
} else if(guessIndex < letterIndex) {
higherOrLower = "小了";
} else {
higherOrLower = "大了";
}
}
drawScreen();
}
}
function drawScreen() {
//背景
context.fillStyle = "#ffffaa";
context.fillRect(0, 0, 500, 300);
//箱子
context.strokeStyle = "#000000";
context.strokeRect(5, 5, 490, 290);
context.textBaseLine = "top";
//日期
context.fillStyle = "#000000";
context.font = "10px _sans";
context.fillText(today, 150, 20);
//消息
context.fillStyle = "#FF0000";
context.font = "14px _sans";
context.fillText(message, 125, 40);
//猜测次数
context.fillStyle = "#109900";
context.font = "16px _sans";
context.fillText("猜测次数： "+guesses, 215, 60);
//大还是小
context.fillStyle = "#000000";
context.font = "16px _sans";
context.fillText("大还是小： "+higherOrLower, 150, 135);
//已经猜测的字符
context.fillStyle = "#FF0000";
context.font = "16px _sans";
context.fillText("已经猜测的字符： "+letterGuessed.toString(), 10, 260);
if(gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("你猜中了", 150, 180);
}
}
function createImageDataPressed(e) {
window.open(theCanvas.toDataURL(), "canvasImage","left=0, top=0, width="+theCanvas.width+", height="+theCanvas.height+", toolbar=0, resizable=0");
}
}ゲーム名から分かるように、このゲームは推理ゲームです。 。システムは各ゲームで自動的に文字を生成し、プレイヤーはキーボードを押してそれがどの文字であるかを推測します。
たとえば、s が生成され、プレイヤーが h を押すと、英語のアルファベットにおける h のインデックスが s のインデックスよりも高いため、ゲームは「Small」というプロンプトを表示します。
この事件に関係する変数。
guesess: 推測の数
message: ユーザーにゲームのプレイ方法を案内するテキスト プロンプト
letters: 推測したい単語のコレクションを保存するテキスト配列。この例では、a to z を使用します
today: 今日の日付
letterToGuess: 推測されるテキスト
higherOrLower: 「大きい」か「小さい」か
letterGuessed: テキストが推測されました
gameOver: ゲームが終了したかどうか、はいブール変数、最初は false、正しく推測した後に true に設定
変数の宣言
var guesses = 0;
var message = "Guess The Letter From a(lower) to z(higher)";
var letters = ["a","b","c","d","e","f","g","h","i","j","k","l",
"m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
var today = new Date();
var letterToGuess = "";
var higherOrLower = "";
var letterGuessed = [];
var gameOver = false;ゲームを初期化
function initGame() {
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
guesses = 0;
lettersGuessed = [];
gameOver = false;
window.addEventListener("keyup", eventKeyPressed, true);
var formElement = document.getElementById("createImageData");
formElement.addEventListener('click', createImageDataPressed, false);
drawScreen();
}テキストに従って、Math のrandom()関数とfloor()関数を使用する推測する生成されたテキストの配列。
そして、ユーザーがキーボードを押すと、「keyup」イベントをリッスンし、渡されたイベントに基づいて押されたキーの値を生成します。
推測ゲームでは大文字と小文字が区別されないため、ユーザーが大文字を押さないようにするには、値を小文字に変換する必要があります。
推測数+1
推測済みのテキスト配列に推測したテキストを追加します
var letterPressed = String.fromCharCode(e.keyCode); letterPressed = letterPressed.toLowerCase(); guesses++; letterGuessed.push(letterPressed);
あとは大きいか小さいかを判断するだけです。
indexOf 関数を通じて、推測するテキストと文字セットに入力したテキストのインデックス値を決定できます。
さらに前に入力すると「小」、それ以外の場合は「大」と表示されます
エンドユーザーが推測対象のテキストを正しく推測した場合は、中央に大きなフォントで「正解しました」と表示されます
letterIndex = letters.indexOf(letterToGuess);
guessIndex = letters.indexOf(letterPressed);
if(guessIndex < 0) {
higherOrLower = "请输入正确的字符";
} else if(guessIndex < letterIndex) {
higherOrLower = "小了";
} else {
higherOrLower = "大了";
｝ これで、この機能はほぼ完成しました。ボタンを押して画面の結果を取得するという小さな機能も追加されました。
使用する関数は toDataUrl() ですので、興味のある方は勉強してみてください。
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連おすすめ:
HTML5 Canvas WeChatポスターの共有導入について
canvasでダイナミックな小さな玉の重なりのエフェクトコードを実現
以上が単純な推測ゲームを作成するための HTML5 Canvas APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。