-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbasic tennis game_ME.html
157 lines (143 loc) · 3.97 KB
/
basic tennis game_ME.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<canvas id="gameCanvas" width="800" height="600">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var canvas;
var canvasContext;
//var ballHeight=10;
var matchEnd=false;
var player1Score=0;
var player2Score=0;
var ballWidth=ballHeight=10;
var posX=100;
var posY=100;
var ballSpeedX=ballSpeedY=10;
var paddleY2=50;
var paddleY1=50;
var fps=30;
const P1_HEIGHT=100;
const P2_HEIGHT=100;
const P_WIDTH=10;
const W_SCORE=20;
//adding graphical image to ball START
var ballPic=document.createElement("img");
ballPic.src="Ball.png";
//adding graphical image to ball END
window.onload = function(){
canvas = document.getElementById("gameCanvas");
canvasContext = canvas.getContext("2d");
canvas.onclick = function() {
if(matchEnd){
player1Score=0;
player2Score=0;
matchEnd=false;
}
};
canvas.onmousemove = function(er) {
paddleY1=calculateMousePos(er).y-canvas.getBoundingClientRect().top-P1_HEIGHT/2;
};
setInterval(function(){moveMe();drawMe();},1000/fps);
}
function calculateMousePos(e) {
return {
x: e.clientX,
y: e.clientY
};
//confusion //var roo = document.scrollingElement;
//var roo = document.documentElement;
//var x2=roo.scrollLeft;
// var y2=roo.scrollTop;
//var coor = "Coordinates: (" + x + "," + y + ") C2 : (" + x1 + "," + y1 + ") C3 : (" + x2 + "," + y2 + ")";
//console.log(coor);
}
function computerMovement(){
if(paddleY2+P2_HEIGHT-P2_HEIGHT/4 < posY){
paddleY2+= 10;
}
else if (paddleY2+P2_HEIGHT/4 > posY ){
paddleY2-= 10;
}
}
function moveMe(){
if(matchEnd){
return;
}
computerMovement();
posX += ballSpeedX;
posY += ballSpeedY;
if(posX+ballWidth>canvas.width-P_WIDTH){
if(posY>=paddleY2 && posY<=paddleY2+P2_HEIGHT){
ballSpeedX = -ballSpeedX;
var deltaY=Math.abs(posY-(paddleY2+P2_HEIGHT/2));
ballSpeedY = deltaY*0.25;
}
else{
player1Score++;
ballReset();
}
}
if(posX<0+P_WIDTH){
if(posY>=paddleY1 && posY<=paddleY1+P1_HEIGHT){
ballSpeedX = -ballSpeedX;
var deltaY=Math.abs(posY-(paddleY1+P1_HEIGHT/2));
ballSpeedY = deltaY*0.25;
}
else{
player2Score++;
ballReset();
}
}
if(posY>canvas.height){
ballSpeedY = -ballSpeedY;
}
if(posY<0){
ballSpeedY = -ballSpeedY;
}
}
function drawNet(){
for(var i=20;i<canvas.height;i+=40){
colorRect(canvas.width/2-1, i, 2, 15,'white');
}
}
function drawMe(){
if(matchEnd){
colorRect(0, 0, canvas.width, canvas.height,'black');
canvasContext.fillStyle = 'white';
if(player1Score>=W_SCORE){
canvasContext.fillText("Left player wins",350,100);
}
else if( player2Score>=W_SCORE){
canvasContext.fillText("Right player wins",350,100);
}
canvasContext.fillText("click to continue",350,400);
return;
}
colorRect(0, 0, canvas.width, canvas.height,'black');
drawNet();
colorRect(0, paddleY1,P_WIDTH,P1_HEIGHT,'white');
colorRect(canvas.width-P_WIDTH, paddleY2,P_WIDTH,P2_HEIGHT,'white');
canvasContext.drawImage(ballPic,posX,posY,ballWidth,ballHeight) ;
//colorCircle(posX, posY, ballWidth*2 , 'white');
canvasContext.fillText(player1Score,20,30);
canvasContext.fillText(player2Score,canvas.width-20,30);
}
function ballReset(){
if(player1Score>=W_SCORE || player2Score>=W_SCORE){
matchEnd=true;
}
posX=canvas.width/2;
posY=canvas.height/2;
ballSpeedX = -ballSpeedX;
}
function colorRect(x,y,width,height,color){
canvasContext.fillStyle = color;
canvasContext.fillRect(x, y, width,height);
}
function colorCircle(x,y,radius,color){
canvasContext.fillStyle = color;
canvasContext.beginPath();
canvasContext.arc(x,y,radius,0,Math.PI*2,true);
canvasContext.fill();
}
</script>
</html>