Tag: JavaScript

pseudo 3D camera turning html canvas javascript [closed]

I am trying to learn to make 3D games in JavaScript using HTML 2D canvas. I was following this post about it and I made a simple scene that you can move around in.

What I need help with is figuring out how to make the effect of the player turning their head, to look side to side and behind them.

Here is what I have:

Codepen link

Code (also on codepen)

html:

<html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>3d test</title> </head> <body>     <canvas id="canv"></canvas> </body> </html>

javascript

//use arrow keys to move around  var canvas = document.getElementById("canv"); var c = canvas.getContext("2d");  canvas.width = canvas.height = 800;  var crateImg = new Image();  class Entity {     constructor(x, y, z, w, h) {         this.x = x;         this.y = y;         this.z = z;         this.w = w;         this.h = h;         this.rx = 0;         this.ry = 0;         this.rs = 0;     }     render() {         //c.fillStyle = 'red';         //c.fillRect(this.rx, this.ry, this.rs*this.w, this.rs*this.h);         c.drawImage(crateImg, this.rx, this.ry, this.rs*this.w, this.rs*this.h);     }     update() {         //project to 3d         this.rs = 400/(400+this.z);         this.rx = ((this.x*this.rs) + 400);         this.ry = (this.y*this.rs) + 400;           //move         this.x += camera.xSpeed;         this.y += camera.ySpeed;         this.z += camera.zSpeed;     } }  var camera = {     xSpeed: 0,     ySpeed: 0,     zSpeed: 0, }  var entities = [];  function random(min, max) {     return Math.floor(Math.random() * (max - min) + min); }  window.onload = function() {     start();     update(); }  function start() {     crateImg.src = "https://i.imgur.com/O9ForWS_d.webp?maxwidth=760&amp;fidelity=grand";     for(let i = 0; i < 100; i++) {         entities.push(new Entity(random(-800, 800), 0, i*10, 50, 50));     } }  function render() {     //fill background     c.fillStyle = 'skyblue';     c.fillRect(0, 0, 800, 800);     //draw flooor     c.fillStyle = 'green';     c.fillRect(0, 400, 800, 400);     //draw entities     for(let i = 0; i < entities.length; i++) {         if(entities[i].z > -400) {             entities[i].render();         }     } }  function update() {     //updatre entities     for(let i = 0; i < entities.length; i++) {         entities[i].update();     }     entities.sort(function(i, i2) {         return i2.z - i.z;     })     //redraw current frame     render();     requestAnimationFrame(update); }   function keyDown(e) {     switch(e.keyCode) {         case 39:             camera.xSpeed = -5;             break;         case 37:             camera.xSpeed = 5;             break;         case 38:             camera.zSpeed = -5;             break;         case 40:             camera.zSpeed = 5;             break;     } }  function keyUp(e) {     switch(e.keyCode) {         case 39:         case 37:             camera.xSpeed = 0;             break;         case 38:         case 40:             camera.zSpeed = 0;             break;     } }  document.onkeydown = keyDown; document.onkeyup = keyUp; ```

Calling javascript in javascript works for some but not all scripts [migrated]

I have the following code in a script.js file that I call in my html file:

function loadScript(url) {         var head = document.getElementsByTagName('head')[0];     var script = document.createElement('script');     script.type = 'text/javascript';     script.src = url;     script.async = false;     head.appendChild(script); }  loadScript('https://polyfill.io/v3/polyfill.min.js?features=es6') loadScript('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js') loadScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js')  hljs.initHighlightingOnLoad();

I use this code because I want to call only one .js file in my html instead of multiple .js files.

The first two scripts that I load to call MathJax work fine. The third script to call highlight.js however does not run.

When I paste all the code from the file ‘highlight.min.js’ into the my script.js file, the javascript does run normally when I open the html.

I don’t understand why loading the ‘highlight.min.js’ file with the loadScript() does not work, or what I can do to get it to work. Any help is appreciated.

Using backbone Javascript Client for menus

So I’m using the Backbone Javascript Client (https://developer.wordpress.org/rest-api/using-the-rest-api/backbone-javascript-client/) provided by WordPress and I am wanting to extend or pull in menus.

I don’t see items regarding menus there, does anyone know if you can extend backbone.js with WP to pull in menu items? All leads would be appreciated.

solid color to sprite (javascript game)

Hi I recently created a javascript game, in this game, math random is used to pick a random shape.

The shapes are in strings, and the associated numbers within the string are then used to show a color.

Is there any way to replace the simple hex colors with an image?

For example:

else if (shape === "H"){     return [[8,8,8],             [8,8,8],             [8,8,8]];

The "8" ties into the following string to get the #F10B38 color.

const color = [null,"#FF2D00","#FF9300","#51FF00","#00FF93","#0087FF","#4E49A7","#9649A7","#F10B38"];

Nothing in dashboard that uses javascript works

I cannot see the media I have uploaded under the Media Library–it’s a blank space(though I can upload with the html uploader ).

I cannot use the Select All checkbox to select all the plugins on the Plugins page. (I have to do them one at a time)

I cannot set a page or post to Draft.

In short, if it needs javascript, it doesn’t work.

I have disabled ALL the plugins AND used a default theme (at the same time).

I have tried to install a few security plugins, but they all seem to use javascript. I have however run a few online scans and no malware turns up.

I was editing some images the day before, and it was working fine.

I don’t know what else to do besides build the site back up from scratch.

I am running PHP 7.3.24 WordPress 5.5.3 (the latest I believe)

Any ideas?

Edited to add that I have entirely replaced the wp-includes and the wp-admin folders. Also note that the site otherwise seems to work perfectly

How do I integrate vanilla Javascript to a wordpress website?

I am new to WordPress but I have been learning to code since February. I am helping a friend add a responsive slider to her WordPress website. I created this slider using HTML, CSS and JS and it works perfectly. However, I am having problems integrating them into WordPress.

The JS code is

const prev = document.querySelector('.prev'); const next = document.querySelector('.next'); const track = document.querySelector('.track'); const carouselWidth = document.querySelector('.carousel-container').offsetWidth; let index = 0; let initialPosition = null; let moving = false; let transform = 0; next.addEventListener('click', ()=>{   index++;   prev.classList.add('show');   track.style.transform = `translateX(-$  {index * carouselWidth}px)`;   if (track.offsetWidth - (index * carouselWidth) < carouselWidth) {     next.classList.add('hide');   } });  prev.addEventListener('click', ()=>{   index--;   next.classList.remove('hide');   if (index === 0) {     prev.classList.remove('show');   }   track.style.transform = `translateX(-$  {0}px)` })    const gestureStart = (e) => {   initialPosition = e.pageX;   moving = true;   const transformMatrix = window.getComputedStyle(track).getPropertyValue('transform');   if (transformMatrix !== 'none') {     transform = parseInt(transformMatrix.split(',')[4].trim());   } }  const gestureMove = (e) => {   if (moving) {     const currentPosition = e.pageX;     const diff = currentPosition - initialPosition;     track.style.transform = `translateX($  {transform + diff}px)`;     } };  const gestureEnd = (e) => {   moving = false; }  if (window.PointerEvent) {   window.addEventListener('pointerdown', gestureStart);    window.addEventListener('pointermove', gestureMove);    window.addEventListener('pointerup', gestureEnd);   } else {   window.addEventListener('touchdown', gestureStart);    window.addEventListener('touchmove', gestureMove);    window.addEventListener('touchup', gestureEnd);        window.addEventListener('mousedown', gestureStart);    window.addEventListener('mousemove', gestureMove);    window.addEventListener('mouseup', gestureEnd);   }

This is the code I added to the functions.php file. It adds all the CSS styles correctly.

function responsive_header(){         wp_enqueue_style( 'responsive_header_css', get_template_directory_uri() .'/css/responsiveslider.css' , array() );         wp_enqueue_script('responsive_header', get_stylesheet_directory_uri() . '/js/responsiveslider.js', array(), '',  false);          }     add_action('wp_enqueue_scripts', 'responsive_header');

What is weird is that if I add a hello world alert to my script it works but nothing else works. Am i doing this wrong or must I use jquery. I dont know jquery but I can learn it to implement this.