github/wasm-pong
1
0
Fork 0
mirror of https://github.com/thilo-behnke/wasm-pong.git synced 2026-08-19 05:06:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

buttons for pausing/resuming/tick game

Browse Source
This commit is contained in:
Thilo Behnke
2022-05-02 12:50:09 +02:00
parent 90052a0a55
commit 47fc0b6811
5 changed files with 57 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pong/src/collision.rs
+1 -1
View File
@@ -69,7 +69,7 @@ pub mod collision {
let rest = &objs[i..];
for other in rest.iter().map(|o| o.borrow()) {
if !self.config.matches_any_group(obj.obj_type(), other.obj_type()) {
self.logger.log(&*format!("objs {} and {} do not match any group: {:?}", obj.obj_type(), other.obj_type(), self.config.groups));
// self.logger.log(&*format!("objs {} and {} do not match any group: {:?}", obj.obj_type(), other.obj_type(), self.config.groups));
continue;
}
let has_collision = obj.bounding_box().overlaps(&other.bounding_box());
pong/src/game_field.rs
+2 -2
View File
@@ -135,11 +135,11 @@ impl Field {
let input = input_opt.unwrap();
match input.input {
InputType::UP => {
let updated_vel_y = (obj_mut.vel().y + 1.).min(5.);
let updated_vel_y = (obj_mut.vel().y + 1.).min(1.);
obj_mut.vel_mut().y = updated_vel_y;
}
InputType::DOWN => {
let updated_vel_y = (obj_mut.vel().y - 1.).max(-5.);
let updated_vel_y = (obj_mut.vel().y - 1.).max(-1.);
obj_mut.vel_mut().y = updated_vel_y;
}
};
src/lib.rs
+8
View File
@@ -114,6 +114,14 @@ impl FieldWrapper {
self.field.height
}
pub fn pause(&mut self) {
self.paused = true
}
pub fn resume(&mut self) {
self.paused = false
}
pub fn tick(&mut self, inputs_js: &JsValue) {
let input_dtos: Vec<InputDTO> = inputs_js.into_serde().unwrap();
let inputs = input_dtos
www/index.html
+11
View File
@@ -20,6 +20,17 @@
</head>
<body>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
<div>
<button id="pause-btn" onclick="WASM_PONG.pauseGame()">
Pause
</button>
<button id="resume-btn" onclick="WASM_PONG.resumeGame()" disabled>
Resume
</button>
<button id="tick-btn" onclick="WASM_PONG.oneTick()" disabled>
Tick
</button>
</div>
<canvas id="wasm-app-canvas"></canvas>
<script src="./bootstrap.js"></script>
</body>
www/index.js
+35 -12
View File
@@ -14,31 +14,54 @@ canvas.width = width
const ctx = canvas.getContext('2d');
let paused = false;
let keysDown = new Set();
console.log(field.get_state())
let actions = [];
const renderLoop = () => {
let actions = getInputActions();
field.tick(actions);
render();
actions = getInputActions();
if (paused) {
requestAnimationFrame(renderLoop);
return;
}
tick();
requestAnimationFrame(renderLoop);
}
const tick = () => {
field.tick(actions);
render();
}
const render = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// drawField();
drawObjects();
}
const drawField = () => {
ctx.beginPath();
window.WASM_PONG = {}
window.WASM_PONG.width = width
window.WASM_PONG.height = height
ctx.strokeStyle = GRID_COLOR;
ctx.rect(1, 1, field.width - 2, field.height - 2);
window.WASM_PONG.pauseGame = () => {
paused = true;
document.getElementById("pause-btn").disabled = true;
document.getElementById("resume-btn").disabled = false;
document.getElementById("tick-btn").disabled = false;
}
ctx.stroke();
window.WASM_PONG.resumeGame = () => {
paused = false;
document.getElementById("pause-btn").disabled = false;
document.getElementById("resume-btn").disabled = true;
document.getElementById("tick-btn").disabled = true;
}
window.WASM_PONG.oneTick = () => {
if (!paused) {
return;
}
tick()
}
const drawObjects = () => {