Skip to content

Commit 20974e5

Browse files
JonathanSteiningerJonathanSteininger
authored
main movement still working on changing how the game loads objects
0 parents  commit 20974e5

File tree

1 file changed

+240
-0
lines changed

1 file changed

+240
-0
lines changed

‎gameTemplate.html‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>JavaScript</title>
6+
</head>
7+
8+
<body>
9+
<canvas id="gameCanvas" width="500" height="500">
10+
<script>
11+
var canvas, canvasContext;
12+
window.onload = function() {
13+
canvas = document.getElementById('gameCanvas');
14+
canvasContext = canvas.getContext('2d');
15+
16+
document.addEventListener('keydown', keyPressed); // sets the event for the keypressed func
17+
document.addEventListener('keyup', keyReleased); // sets the event for the keyreleased func
18+
19+
setInterval(
20+
mainloop, 1000 / 50); // starts the game loop
21+
22+
creatGrid(); // creates the grid for the entier game
23+
24+
}
25+
//from your lessons
26+
// var fruits = ['apple', ['green', 'red'], 'banana', 'pear'];
27+
//
28+
// console.log(fruits[0] + fruits[1][1]);
29+
//
30+
//
31+
//
32+
// var numbers = [];
33+
// var end = 30;
34+
// for (i = 0; i < end; i++) {
35+
// numbers.push(end - [i]);
36+
// }
37+
// console.log(numbers);
38+
function mainloop() {
39+
if (timerMove >= 5) { // makes it so theres a clean interuption to your movement
40+
playerMovement();
41+
} else {
42+
timerMove++;
43+
}
44+
45+
if (gamerun == true) { // makes it so that other things only get drawn if you move. helps for future games. can be removed.
46+
drawGrid(); //draws the background
47+
drawWalls();
48+
drawPlayer(); //draws the player
49+
gamerun = false;
50+
}
51+
52+
}
53+
//mainloop timers and ifs
54+
var gamerun = true;
55+
var timerMove = 0;
56+
57+
//grid variables. try not to get odd numbers with the horiontalSize and verticalSize
58+
var CanvasWidth = document.getElementById('gameCanvas').width;
59+
var Canvasheight = document.getElementById('gameCanvas').height;
60+
var HA = 25; // made this HA so theres not as much code for the coordinates for the walls.
61+
var verticalAmount = 25;
62+
var horizontalsize = (CanvasWidth / HA);
63+
var verticalsize = (Canvasheight / verticalAmount);
64+
65+
//players current position and starting position
66+
var playerXPosition = 5;
67+
var playerYPosition = 5*HA;
68+
69+
//player movement keys
70+
const UP_KEY = 87;
71+
const DOWN_KEY = 83;
72+
const LEFT_KEY = 65;
73+
const RIGHT_KEY = 68;
74+
var upKeyPressed = false;
75+
var downKeyPressed = false;
76+
var leftKeyPressed = false;
77+
var rightKeyPressed = false;
78+
79+
var wallsXY = [
80+
[7, 7 * HA],
81+
[8, 7 * HA],
82+
[9, 7 * HA],
83+
[7, 10 * HA],
84+
[7, 8 * HA],
85+
[7, 9 * HA],
86+
[7, 10 * HA],
87+
[8, 10 * HA],
88+
[9, 10 * HA],
89+
[10, 10 * HA],
90+
[10, 9 * HA],
91+
[10, 8 * HA],
92+
[10, 7 * HA],
93+
[20, 17 * HA],
94+
[13, 15 * HA]
95+
] // this is all the walls
96+
97+
// for the wall collision
98+
var wallCheckY = playerYPosition;
99+
var wallCheckX = playerXPosition;
100+
101+
function drawWalls() {
102+
for (c = 0; c < wallsXY.length; c++) { //draws all the walls
103+
colorRect(grid[wallsXY[c][0]][0], grid[wallsXY[c][1]][1], horizontalsize, verticalsize, "rgba(150,1,1,1)");
104+
}
105+
}
106+
107+
function keyPressed(evt) { /// had to put multiple so therres no order issue for the movement. helps it stop feeling sticky.
108+
if (evt.keyCode == UP_KEY && downKeyPressed == false && leftKeyPressed == false && rightKeyPressed == false) {
109+
upKeyPressed = true;
110+
111+
} else {
112+
upKeyPressed = false;
113+
}
114+
if (evt.keyCode == DOWN_KEY && upKeyPressed == false && leftKeyPressed == false && rightKeyPressed == false) {
115+
downKeyPressed = true;
116+
117+
} else {
118+
downKeyPressed = false;
119+
}
120+
if (evt.keyCode == RIGHT_KEY && downKeyPressed == false && leftKeyPressed == false && upKeyPressed == false) {
121+
rightKeyPressed = true;
122+
123+
} else {
124+
rightKeyPressed = false;
125+
}
126+
if (evt.keyCode == LEFT_KEY && downKeyPressed == false && upKeyPressed == false && rightKeyPressed == false) {
127+
leftKeyPressed = true;
128+
129+
130+
} else {
131+
leftKeyPressed = false;
132+
}
133+
if (evt.keyCode == UP_KEY && downKeyPressed == false && leftKeyPressed == false && rightKeyPressed == false) {
134+
upKeyPressed = true;
135+
136+
} else {
137+
upKeyPressed = false;
138+
}
139+
if (evt.keyCode == DOWN_KEY && upKeyPressed == false && leftKeyPressed == false && rightKeyPressed == false) {
140+
downKeyPressed = true;
141+
142+
} else {
143+
downKeyPressed = false;
144+
}
145+
if (evt.keyCode == RIGHT_KEY && downKeyPressed == false && leftKeyPressed == false && upKeyPressed == false) {
146+
rightKeyPressed = true;
147+
148+
} else {
149+
rightKeyPressed = false;
150+
}
151+
152+
}
153+
154+
function keyReleased(evt) {
155+
if (evt.keyCode == UP_KEY) {
156+
upKeyPressed = false;
157+
}
158+
if (evt.keyCode == DOWN_KEY) {
159+
downKeyPressed = false;
160+
}
161+
if (evt.keyCode == RIGHT_KEY) {
162+
rightKeyPressed = false;
163+
}
164+
if (evt.keyCode == LEFT_KEY) {
165+
leftKeyPressed = false;
166+
}
167+
}
168+
169+
function playerMovement() { // this changes the player's position
170+
//use + or - 10 to move up or down.
171+
// use = or - 1 to mave left to right.
172+
173+
wallCheckY = playerYPosition; // to remember past Yposition for later
174+
wallCheckX = playerXPosition; // to remember past Xposition for later
175+
176+
if (upKeyPressed == true) {
177+
playerYPosition -= HA;
178+
gamerun = true; // lets the mainloop draw the rest of the game
179+
timerMove = 0; // resets the timer for next move
180+
}
181+
if (downKeyPressed == true) {
182+
playerYPosition += HA;
183+
gamerun = true; // lets the mainloop draw the rest of the game
184+
timerMove = 0; // resets the timer for next move
185+
}
186+
if (leftKeyPressed == true) {
187+
playerXPosition -= 1;
188+
gamerun = true; // lets the mainloop draw the rest of the game
189+
timerMove = 0; // resets the timer for next move
190+
}
191+
if (rightKeyPressed == true) {
192+
playerXPosition += 1;
193+
gamerun = true; // lets the mainloop draw the rest of the game
194+
timerMove = 0; // resets the timer for next move
195+
}
196+
for (c = 0; c < wallsXY.length; c++) { // this checks all the walls that are in the wallsXY array.
197+
if (playerXPosition == wallsXY[c][0] && playerYPosition == wallsXY[c][1]) { // if the players position is the same as the walls position then it will turn it back to its position befor hand.
198+
playerXPosition = wallCheckX; //changes the poition to its previouse state
199+
playerYPosition = wallCheckY; //changes the poition to its previouse state
200+
}
201+
}
202+
}
203+
204+
function drawPlayer() { // draws the player
205+
colorRect(grid[playerXPosition][0], grid[playerYPosition][1], horizontalsize, verticalsize, "rgba(255,1,1,1)")
206+
}
207+
208+
var grid = []; // the array for the grids
209+
210+
function creatGrid() { // creates the coordinates for all the blocks
211+
for (var c = 0; c < verticalAmount; c++) {
212+
for (var i = 0; i < HA; i++) {
213+
grid.push([(horizontalsize * (i)), (verticalsize * (c))]);
214+
}
215+
}
216+
console.log(grid); // to see all the coordinates
217+
}
218+
219+
function drawGrid() { // draws all the black squares/background
220+
for (c = 0; c < grid.length; c++) {
221+
colorRect(grid[c][0], grid[c][1], horizontalsize, verticalsize, "rgba(1,1,1,1)");
222+
}
223+
}
224+
225+
function colorRect(x, y, w, h, c) { // function used to draw simple blocks with colour
226+
canvasContext.fillStyle = c;
227+
canvasContext.fillRect(x, y, w, h)
228+
}
229+
// this i wanted to keep just in case I need it
230+
// var colors1 = Math.floor(Math.random()*255);
231+
// var colors2 = Math.floor(Math.random()*255);
232+
// var colors3 = Math.floor(Math.random()*255);
233+
// var finalColor = 'rgba(' + colors1 + ',' + colors2 + ',' + colors3 + ',1)';
234+
// grid.push(finalColor)
235+
236+
</script>
237+
</canvas>
238+
</body>
239+
240+
</html>

0 commit comments

Comments
 (0)