ここにあるブレイクアウト ゲームのチュートリアルに従っています ( http://billmill.org/static/canvastutorial/index.html )。私はそれをうまく終えて、独自の機能を追加しています。ただし、「restartGame()」関数は実行されません。実行されているかどうかを確認するために、現時点でスコアに 2 を追加するように単純に指示しましたが、実行されていません。「Clear()」などの他の関数があることは知っています。
これが私のコードです。ばかげたことをしていたらごめんなさい >.<
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="game.aspx.cs" Inherits="Game" Title="SetoChaos - Game" ValidateRequest="false" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="css/Styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<a href="Default.aspx">Back to site.</a>
</body>
</html>
<canvas id="canvas" width="1200" height="700"></canvas>
<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
//BEGIN LIBRARY CODE
var x = 150;
var y = 150;
var dx = 2;
var dy = 4;
var WIDTH;
var HEIGHT;
var ctx;
function init() {
ctx = $('#canvas')[0].getContext("2d");
WIDTH = $("#canvas").width();
HEIGHT = $("#canvas").height();
return setInterval(draw, 10);
}
function circle(x, y, r) {
//ctx.fillStyle = "#00FFFF";
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
function rect(x, y, w, h) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.closePath();
ctx.fill();
}
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
var paddlex;
var paddleh;
var paddlew;
function init_paddle() {
paddlex = WIDTH / 2;
paddleh = 10;
paddlew = 75;
}
rightDown = false;
leftDown = false;
//set rightDown or leftDown if the right or left keys are down
function onKeyDown(evt) {
if (evt.keyCode == 39) rightDown = true;
else if (evt.keyCode == 37) leftDown = true;
}
//and unset them when the right or left key is released
function onKeyUp(evt) {
if (evt.keyCode == 39) rightDown = false;
else if (evt.keyCode == 37) leftDown = false;
}
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);
var canvasMinX;
var canvasMaxX;
function init_mouse() {
canvasMinX = $("#canvas").offset().left;
canvasMaxX = canvasMinX + WIDTH;
}
function onMouseMove(evt) {
if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX) {
paddlex = evt.pageX - canvasMinX - (paddlew/2);
}
}
$(document).mousemove(onMouseMove);
var bricks;
var NROWS;
var NCOLS;
var BRICKWIDTH;
var BRICKHEIGHT;
var PADDING;
var rowcolors; // = ['#' + Math.floor(Math.random() * 16777215).toString(16), '#' + Math.floor(Math.random() * 16777215).toString(16), '#' + Math.floor(Math.random() * 16777215).toString(16), "#00FFFF", '#' + Math.floor(Math.random() * 16777215).toString(16), ];
function initbricks() {
NROWS = 10;
NCOLS = 10;
BRICKWIDTH = (WIDTH / NCOLS) - 1;
BRICKHEIGHT = 10;
PADDING = 1;
bricks = new Array(NROWS);
for (i = 0; i < NROWS; i++) {
bricks[i] = new Array(NCOLS);
for (j = 0; j < NCOLS; j++) {
bricks[i][j] = 1;
}
}
rowcolors = new Array(NROWS);
for (i = 0; i <= NROWS; i++) {
rowcolors[i] = new Array(NCOLS);
for (j = 0; j <= NCOLS; j++) {
rowcolors[i][j] = '#' + Math.floor(Math.random() * 16777215).toString(16); //Random Hex Colour Value
}
}
}
var ballr = 10;
var paddlecolor = "#FF0000";
var ballcolor = "#00FF00";
var backcolor = "#000000";
var restartGame = false;
var hit = new Audio("sound/hit.wav");
var shipHit = new Audio("sound/shipHit.wav");
var sideHit = new Audio("sound/sideHit.wav");
var dead = new Audio("sound/dead.wav");
var score = 0;
function restartGame() {
score += 2;
}
//END LIBRARY CODE
function draw() {
ctx.fillStyle = backcolor;
clear();
ctx.fillStyle = ballcolor;
circle(x, y, ballr);
ctx.font = '40pt Calibri';
ctx.fillText("Score: " + score, WIDTH-WIDTH, HEIGHT-30);
//move the paddle if left or right is currently pressed
if (rightDown) paddlex += 5;
else if (leftDown) paddlex -= 5;
ctx.fillStyle = paddlecolor;
rect(paddlex, HEIGHT - paddleh, paddlew, paddleh);
//draw bricks
for (i = 0; i < NROWS; i++) {
for (j = 0; j < NCOLS; j++) {
if (bricks[i][j] == 1) {
rect((j * (BRICKWIDTH + PADDING)) + PADDING,
(i * (BRICKHEIGHT + PADDING)) + PADDING,
BRICKWIDTH, BRICKHEIGHT);
ctx.fillStyle = rowcolors[i][j];
}
//Doing this for a second time with or without the fillstyle seems allow the colours to properly wrap around rows
if (bricks[i][j] == 1) {
rect((j * (BRICKWIDTH + PADDING)) + PADDING,
(i * (BRICKHEIGHT + PADDING)) + PADDING,
BRICKWIDTH, BRICKHEIGHT);
}
}
}
//Tutorial says to look at this page for collision
// http://www.harveycartel.org/metanet/tutorials/tutorialA.html
//have we hit a brick?
rowheight = BRICKHEIGHT + PADDING;
colwidth = BRICKWIDTH + PADDING;
row = Math.floor(y / rowheight);
col = Math.floor(x / colwidth);
//if so, reverse the ball and mark the brick as broken
if (y < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
dy = -dy;
bricks[row][col] = 0;
hit.play();
score += 1;
}
if (x + dx > WIDTH || x + dx < 0) {
dx = -dx;
sideHit.play();
}
if (y + dy < 0)
dy = -dy;
else if (y + dy > HEIGHT) {
if (x > paddlex && x < paddlex + paddlew) {
dy = -dy;
shipHit.play();
}
else {
//game over, so stop the animation
//dead.play();
//clearInterval(intervalId);
ctx.fillText("DEAD.", WIDTH - WIDTH, HEIGHT - 130);
restartGame();
}
}
x += dx;
y += dy;
}
init();
init_paddle();
init_mouse();
initbricks();
</script>