-1

これは私の最初の Web 開発クラスで、関数に問題があり、どれを呼び出すべきかわかりません。先生は次のコードを教えてくれました。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Animation</title>
    <!-- include the jQuery UI stylesheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19                                                                                /themes/base/jquery-ui.css">
<!-- include the jQuery and jQuery UI JavaScript files -->
<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>

<style>
canvas {
    border: 1px solid black;
}
</style>

ソロ・ポン

このゲームを終了するには:
  • ボールがパドルに当たると、ボールは跳ね返ります (パドルのどこに当たったかに応じた方向に)。
  • ボールが一番左の壁にぶつかると、プレイヤーは負けます。
  • パドルが画面の上/下からはみ出さないようにします。
  • ボーナス (2pts):ボールの速度を増減する「速く」と「遅く」(キャンバスの外側) のボタンを提供します。

<canvas id="mycanvas" width="300" height="300"> d </canvas>

<script>
// global variables

var context;
// width/height of the canvas
var width;
var height;

// position and direction of the ball
var x = 100;
var y = 180;
var dx = 2;
var dy = 2;

// paddle
var paddley; // y location
var paddleh; // height
var paddlew; // width

// keyboard input
var upPressed = false; // is the user pressing up?
var downPressed = false; // is the user pressing down?

// setup canvas and animation timer 
function init() {
    context = $("#mycanvas")[0].getContext("2d");
    width = $("#mycanvas").width();
    height = $("#mycanvas").height();
    return setInterval(draw, 10); // every 10 milliseconds, draw will be called.
}

// called when a key is pressed
function onKeyDown(evt) {
    if (evt.keyCode == 38) upPressed = true; // 38 is code for up button
    else if (evt.keyCode == 40) downPressed = true; // 40 is code for down button
}

//called when a key is released
function onKeyUp(evt) {
if (evt.keyCode == 38) upPressed = false;
else if (evt.keyCode == 40) downPressed = false;
}

// attaches the key methods to the document.
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

// clear the screen to prepare for drawing a new frame
function clear() {
    context.clearRect(0, 0, width, height);
}

// draw a circle at x,y with radius r
function circle(x,y,r) {
  context.beginPath();
  context.arc(x, y, r, 0, Math.PI*2, true);
  context.closePath();
  context.fill();
}

// draw a filled rectangle at x,y with width,height
function rect(x,y,w,h) {
    context.beginPath();
    context.rect(x,y,w,h);
    context.closePath();
    context.fill();
}

// init location and size of paddle 
function init_paddles() {
    paddley = 100;
    paddleh = 75;
    paddlew = 10;
}

// draw a single frame of the game
function draw() {
    clear();
    // draw circle
    circle(x, y, 10);

    // update paddle location
    if (upPressed) paddley -= 5;
    else if (downPressed) paddley += 5;

    // draw paddle
    rect(10, paddley, paddlew, paddleh);

    // ball hit a wall!     
    if (x + dx > width || x + dx < 0)
        dx = -dx; // flip x direction
    if (y + dy > height || y + dy < 0)
        dy = -dy; // flip y direction


    // move ball        
    x += dx;
    y += dy;        
}

init();
init_paddles();
</script>

 </body>

ボールがパドルに当たると、反対方向に跳ね返るのに助けが必要です。if(x + dx > paddley || x + dx >paddleh) dx = -dx; のようになります。

4

1 に答える 1