Chromium 10.0.648.205 (81283) Ubuntu 10.10 で動作確認した。
タイトルを表示し、"はじめる"を選択すると前回の四角形を動かす画面へ遷移する。
game.html
<html>
<head><meta charset="utf-8">
<script type="text/javascript" src="game.js">
</script>
<title>game</title>
<style type="text/css">
body {background:#EEEEEE;}
canvas {background:#FFFFFF;}
</style>
</head>
<body onload="init();">
<canvas id="c1" width="640" height="480">
canvas is not available
</canvas>
</body>
</html>
game.js
const FPS = 30;
var canvas1;
var context;
var drawIntervalID;
var cursor;
var rect;
var Cursor = function() {
this.x = 230;
this.y = 180;
this.gameStartFlag = true;
this.img = new Image();
this.img.src = "img/cursor.png";
};
Cursor.prototype.moveUp = function() {
this.x = 230;
this.y = 180;
this.gameStartFlag = true;
}
Cursor.prototype.moveDown = function() {
this.x = 230;
this.y = 230;
this.gameStartFlag = false;
}
Cursor.prototype.gameStart = function() {
rect = new Rect();
clearInterval(drawIntervalID);
drawIntervalID = setInterval(moveDraw, 1000/FPS);
document.onkeydown = moveKeyEvent;
}
Cursor.prototype.gameEnd = function() {
gameOver();
}
var Rect = function() {
this.x = 0;
this.y = 0;
this.size = 20;
};
Rect.prototype.moveLeft = function() {
if(this.x > 0) {
this.x -= 10;
} else {
this.x = 0;
}
}
Rect.prototype.moveRight = function() {
if(this.x < canvas1.width - this.size) {
this.x += 10;
} else {
this.x = canvas1.width - this.size;
}
}
Rect.prototype.moveUp = function() {
if(this.y > 0) {
this.y -= 10;
} else {
this.y = 0;
}
}
Rect.prototype.moveDown = function() {
if(this.y < canvas1.height - this.size) {
this.y += 10;
} else {
this.y = canvas1.height - this.size;
}
}
function init() {
canvas1 = document.getElementById('c1');
if(canvas1 == null) {
console.log("canvas is null");
return false;
}
context = canvas1.getContext('2d');
drawIntervalID = setInterval(titleDraw, 1000/FPS);
document.onkeydown = titleKeyEvent;
cursor = new Cursor();
}
function titleDraw() {
context.clearRect(0,0,canvas1.width,canvas1.height);
context.textAlign = "center";
context.font="20px 'sans-serif'";
context.fillText("ぼっちの冒険", canvas1.width/2, 100);
context.fillText("はじめる", canvas1.width/2, 200);
context.fillText("おわる", canvas1.width/2, 250);
context.drawImage(cursor.img, cursor.x, cursor.y);
}
function moveDraw() {
context.clearRect(0,0,canvas1.width,canvas1.height);
context.fillRect(rect.x,rect.y,rect.size,rect.size);
}
function titleKeyEvent(e) {
if(e.keyCode == 38) { //up
cursor.moveUp();
}
if(e.keyCode == 40) { //down
cursor.moveDown();
}
if(e.keyCode == 13) { //Enter
if(cursor.gameStartFlag) {
cursor.gameStart();
} else {
cursor.gameEnd();
}
}
}
function moveKeyEvent(e) {
if(e.keyCode == 37) { //left
rect.moveLeft();
} else if(e.keyCode == 38) { //up
rect.moveUp();
} else if(e.keyCode == 39) { //right
rect.moveRight();
} else if(e.keyCode == 40) { //down
rect.moveDown();
} else if(e.keyCode == 27) { //Esc
gameOver();
}
}
function gameOver() {
clearInterval(drawIntervalID);
document.onkeydown = null;
context.clearRect(0,0,canvas1.width,canvas1.height);
context.font="30px 'sans-serif'";
context.fillText("GAME OVER", canvas1.width/2, canvas1.height/2);
}
cursor.pngは自分で描くか適当にどっかから持ってきてimgディレクトリ作って入れてください。